<template>
	<view>
		<view class="ul">
			<view class="li">
				<view class="txt">
					<text>头型</text>
				</view>
				<view class="li_img">
					<image :src="changeUser.img" class="li_img_1" />
				</view>

			</view>
			<view class="li">
				<view class="txt">
					<text>用户名</text>
				</view>
				<view class="li_img_q">
					<text>{{userInfo.phonenumber}}</text>
				</view>

			</view>
			<view class="li" @tap="openNickname">
				<view class="txt">
					<text>昵称</text>
				</view>
				<view class="li_img_q">
					<text>{{changeUser.nickname}}</text>
				</view>

			</view>
			<view class="li" @tap="openGender">
				<view class="txt">
					<text>性别</text>
				</view>
				<view class="li_img_q">
					<text>{{changeUser.gender}}</text>
				</view>
			</view>
			<view class="li" @tap="openBirth">
				<view class="txt">
					<text>出生日期</text>
				</view>
				<view class="li_img_q">
					{{changeUser.birthday}}
					<text class="cuIcon-right"></text>
				</view>

			</view>
			<button class="confirmChange cu-btn block line-blue lg cuIcon-my" @tap="goChange">确认修改</button>
				<button class="confirmChange cu-btn block line-blue lg cuIcon-my" @tap="byebye">退出登录</button>
			<!-- <view class="li" @tap="goReal">
				<view class="txt">
					<text>实名认证</text>
				</view>
				<view class="li_img_q">
					<text></text>
				</view>
			</view> -->

		</view>
		<!-- 生日选择器 -->
		<w-picker :visible.sync="birthdayBox" mode="date" startYear="1900" endYear="2029" :value="changeUser.birthday"
			:current="true" fields="day" @confirm="birthConfirm($event,'date')" @cancel="onCancel"
			:disabled-after="true" ref="date"></w-picker>
		<!-- 性别选择 -->
		<w-picker :visible.sync="genderBox" mode="selector" value="女" default-type="name" :options="genderArray"
			@confirm="genderConfirm($event,'selector')" @cancel="onCancel" ref="selector"></w-picker>
		<!-- 昵称修改 -->
		<modal v-if="nicknameBox" title="请输入昵称" confirm-text="确定" cancel-text="取消" @cancel="onCancel" @confirm="confirmPop"> 
					<input type='text' class="align-center" v-model="changName" />
				</modal>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	export default {
		onShow() {
			if(this.userInfo.id){
				this.changeUser.nickname=this.userInfo.account
				this.changeUser.id=this.userInfo.id
			}else{
				uni.removeSavedFile({
					url:"../../pages/login/login?code='1'"
				})
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		data() {
			return {
				nicknameBox:false,
				genderBox: false,
				birthdayBox: false,
				changName:"",
				changeUser: {
					id: 1,
					nickname: "癌细胞",
					gender: "保密",
					birthday: "",
					img: require('../static/tx01.png')
				},
				genderArray: [{
					"label": "男",
					"value": "男"
				}, {
					"label": "女",
					"value": "女"
				}]

			}
		},
		methods: {
			...mapMutations(['saveUersInfo']),
			//进入实名认证
			goReal() {
				uni.navigateTo({
					url: "../t-realAuth/t-realAuth"
				})
			},
			//生日确定
			birthConfirm(data) {
				this.changeUser.birthday = data.value
				this.birthdayBox = false
			},
			//打开生日
			openBirth() {
				this.birthdayBox = true
			},
			//性别确定
			genderConfirm(data) {
				this.changeUser.gender = data.value
				this.genderBox = false
			},
			// 性别打开
			openGender() {
				this.genderBox = true
			},
			onCancel() {
				this.genderBox = false
				this.birthdayBox = false
				this.nicknameBox = false
			},
			//昵称确认
			confirmPop(){
				this.changeUser.nickname=this.changName
				this.nicknameBox = false
			},
			//昵称打开
			openNickname() {
				this.nicknameBox = true
			},
			//确认修改
			goChange(){
				console.log(this.changeUser)
			},
			//退出登录
			byebye(){
				uni.setStorage({
					key: 'token',
					data: null,
				});
				uni.setStorage({
					key:'userid',
					data:'',
				});
				uni.switchTab({
					url:'../../pages/mine/mine'
				});
				this.saveUersInfo({})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ul {
		background-color: #F8F8F8;
		height: 100vh;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: white;

		.li {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e1e1e1;

			box-sizing: border-box;
			padding: 30rpx 0rpx;

			.txt {
				font-size: 30rpx;
				vertical-align: middle;

			}

			.li_img {
				width: 70rpx;
				height: 70rpx;
				// border: 1px solid;
				border-radius: 50%;
				overflow: hidden;

				.li_img_1 {
					width: 100%;
					height: 100%;
				}
			}

			.li_img_q {
				color: #C0C0C0;
			}
		}
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.confirmChange {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>
